<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>CSS Classes - Raxan User Guide</title>
    <link href="../raxan/ui/css/master.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 8]> <link rel="stylesheet" href="../raxan/ui/css/master.ie.css" type="text/css"><![endif]-->
    <link href="../raxan/ui/css/default/theme.css" rel="stylesheet" type="text/css" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="highlight/styles/default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="highlight/highlight.js"></script>
    <script type="text/javascript">
        <!--
        hljs.initHighlightingOnLoad('javascript','html','php','css');
        //-->
    </script>
    <!--[if lt IE 7]>
        <style type="text/css"> form input.textbox { height: 26px; }</style>
    <![endif]-->
</head>

<body>
    <div class="container">
        <div id="header" class="rax-header-pal rax-metalic">
            <h2 class="ltm bottom c14">Raxan User Guide</h2>
            <ul>
                <li><a href="../../index.html">Home</a></li>
                <li><a href="index.html">Overview</a></li>
                <li><a href="features.html">Features</a></li>
                <li><a href="table-of-contents.html" title="Table of Content">Contents</a></li>
                <li><a href="../examples">Examples</a></li>
            </ul>
            <ul class="search">
                <li>
                    <form class="tpm c9" name="form1" action="../tools/search.php" method="get">
                        <input class="c6 textbox round left" placeholder="Search" type="text" name="q" value="" title="Search User Guide"  />
                        <input class="c2 button round left ltm" type="submit" value="Go" />
                    </form>
                </li>
            </ul>

        </div>
        <hr class="space"/>
        <div class="master-content-wrapper">
            <div class="container prepend-top c48 master-content"><h2>CSS Framework Class Reference</h2>

<p>A list of classes that are currently available with the framework.</p>

<h3>Typography Classes <a name="typography"></a></h3>

<p>Use these classes to modify the look and feel of text within the page.</p>

<ul>
<li>small</li>
<li>large</li>
<li>quiet</li>
<li>loud</li>
<li>highlight</li>
<li>added</li>
<li>removed</li>
<li>caps</li>
</ul>

<h3>Grid Classes <a name="layout"></a></h3>

<ul>
<li>container - Defines a container for columns and other html elements. A container must be used to define the outer limits of the page.
For example: &lt;div class="container c40"&gt;Page Content goes here...&lt;/div&gt;</li>
<li>column - Converts an element into a column with a 10px right margin. Used with grid cell classes such as c1, ... and r1,... For Example: &lt;div class="column c5"&gt;&lt;/div&gt;</li>
<li>last - Used by the last column in the row to remove the column margin.</li>
<li>clear - Clear floats</li>
</ul>

<h4><strong>Fixed-Width Cells</strong></h4>

<ul>
<li>c1, c2, ..., c50, c60, c70, c80, c90, c100 - Use these classes to set the column width of an element (1 cell width = 20px).
For Example: &lt;div class="c10"&gt;&lt;/div&gt;</li>
<li>r1, r2, ..., r50 - Use these classes to set the row height of an element (1 cell height = 20px ).
For Example: &lt;div class="c10 r10"&gt;&lt;/div&gt;</li>
</ul>

<h4><strong>Elastic Cells</strong></h4>

<ul>
<li>elastic - Allows the browser to automatically calculate the width of a div element to fit the available space</li>
<li>e10,e20,...,e100 - Use these elastic classes to set the percentage (%) width of an element in increments of 10.
For Example: &lt;div class="e10"&gt;&lt;/div&gt;.
This will stretch the width of the div element to occupy 10% of it's parent element.</li>
<li>h10,h20,...,h100 - Use these elastic classes to set the percentage (%) height of an element in increments of 10.
For Example: &lt;div class="e10 h10"&gt;&lt;/div&gt;.
This will stretch the width and height of the div element to occupy 10% of it's parent element.</li>
</ul>

<h3>Margins &amp; Padding Classes</h3>

<ul>
<li>pad - Sets padding to 10px</li>
<li>hlf-pad - Sets padding to 5px</li>
<li>dbl-pad - Sets padding to 20px</li>
<li>margin - Sets margin to 10px</li>
<li>tpm, rtm, bmm, ltm - Sets top, right, bottom or left margins</li>
</ul>

<h3>Position Classes</h3>

<ul>
<li>above - Absolution position</li>
<li>left - float elemnt left</li>
<li>center - center element</li>
<li>top - Sets top margin-top to 0px</li>
<li>bottom - Sets bottom margin to 0px</li>
<li>front - Set z-index to 1000</li>
<li>back - Set z-index to -1000</li>
<li>fixed - Fixed Position</li>
</ul>

<h3>Prepend &amp; Append Classes</h3>

<p>Used these classes to append or prepend empty cells to an element</p>

<ul>
<li>append1, append2, ..., append10</li>
<li>prepend1, prepend2, ..., prepend10</li>
<li>prepend-top, append-bottom</li>
</ul>

<h3>Push / Pull &amp; Up / Down Classes</h3>

<p>Use these classes to push or pull an element into a previous cell.</p>

<ul>
<li>push1, push2, push3, push4, push5</li>
<li>pull1, pull2, pull3, pull4, pull5</li>
<li>up1, up2, up3, up4, up5</li>
<li>dn1, dn2, dn3, dn4, dn5</li>
</ul>

<h3>Visibility Classes</h3>

<ul>
<li>hide - Display none;</li>
<li>transparent - Opacity 0.4</li>
<li>disabled</li>
</ul>

<h3>Image Classes</h3>

<ul>
<li>hvspace - Margin 1.5em;</li>
</ul>

<h3>Misc Classes</h3>

<ul>
<li>space - Creates white horizontal ruler</li>
<li>clip - Overflow hidden</li>
<li>clip-x - Overflow-x hidden</li>
<li>clip-y - Overflow-y hidden</li>
<li>scrollable - Overflow auto</li>
<li>mouse-cursor - Displays the default mouse pointer</li>
<li>click-cursor - Displays the hand or click pointer</li>
</ul>

<h3>Color Classes</h3>

<p>Use to set the background color of an element</p>

<ul>
<li>white</li>
<li>silver</li>
<li>lightgray</li>
<li>pastelgreen</li>
<li>softblue</li>
<li>softred</li>
<li>softgreen</li>
<li>softyellow</li>
</ul>

<h3>Border Classes</h3>

<ul>
<li>tpb, rtb, bmb, ltb - Used to add a 1px  top, right, bottom or left border to an element</li>
<li>colborder - Add right border to a column</li>
<li>border, border1 - Creates a 1px border around an element</li>
<li>border2 - Creates a 2px border around an element</li>
<li>border3 - Creates a 3px border around an element</li>
<li>border4 - Creates a 4px border around an element</li>
<li>border5 - Creates a 5px border around an element</li>
<li>round - Used to create 4px border-radius.</li>
<li>round-tl - Top-left border-radius</li>
<li>round-tr - Top-right border-radius</li>
<li>round-bl - Bottom-left border-radius</li>
<li>round-br - Bottom-right border-radius</li>
<li>round-top - Top border-radius</li>
<li>round-bottom - Bottom border-radius</li>
<li>round-right - Right border-radius</li>
<li>round-left - Left border-radius</li>
</ul>

<h3>Form Classes</h3>

<ul>
<li>textbox - Used to style a textboxes and textareas.</li>
<li>required - Used to highlight a required form element</li>
</ul>

<h3>Button Classes <a name="ui"></a></h3>

<ul>
<li><strong>button</strong> - Used to style a button or a hyperlink

<ul>
<li>ok, cancel, process, continue, disabled - Used to set button color and state.</li>
</ul></li>
</ul>

<h3>Surface Classes</h3>

<ul>
<li>rax-glossy</li>
<li>rax-metalic</li>
<li>rax-glass</li>
</ul>

<h3>Palette Classes</h3>

<ul>
<li>rax-background-pal</li>
<li>rax-header-pal</li>
<li>rax-toolbar-pal</li>
<li>rax-footer-pal</li>
<li>rax-content-pal</li>
<li>rax-active-pal</li>
<li>rax-inactive-pal</li>
<li>rax-hover-pal</li>
<li>rax-selected-pal</li>
<li>rax-itm-pal</li>
<li>rax-alt-pal</li>
<li>rax-error-pal</li>
<li>rax-alert-pal</li>
<li>rax-success-pal</li>
<li>rax-info-pal</li>
</ul>

<h3>Back Drop</h3>

<ul>
<li>rax-box-shadow</li>
</ul>

<h3>Box Classes</h3>

<ul>
<li><strong>rax-box</strong> - Raxan box class

<ul>
<li>alert, info, notice, error, success - used to modify box state</li>
<li>box-title - box title</li>
</ul></li>
</ul>

<h3>Table Classes</h3>

<ul>
<li><strong>rax-table</strong> - Main table class

<ul>
<li>tbl-header - table header class</li>
<li>tbl-header - Use on tr element to style table header</li>
<li>even - Use on tr element to style alternate table rows</li>
<li>sort - Use on td and the elements to style sorted column</li>
<li>select - Use on tr element to style selected row</li>
<li>hover - Use on tr element to style row when mouse over.</li>
</ul></li>
</ul>

<h3>TabStrip Classes</h3>

<ul>
<li><strong>rax-tabstrip</strong> - Converts an unordered list into a horizontal TabStrip

<ul>
<li>selected - Highlights the selected list item (or tab).
For example: &lt;li class="selected"&gt;&lt;a href="#"&gt;Tab1&lt;/a&gt;&lt;/li&gt;</li>
</ul></li>
</ul>

<h3>Cursor Clases</h3>

<ul>
<li>busy_cursor - This class is used to define the busy cursor icon for the Cursor plugin</li>
</ul>

<h3>UI Resizable (jQuery)</h3>

<ul>
<li>ui-resizable - Resizeable class

<ul>
<li>ui-resizable-handle</li>
<li>ui-resizable-n</li>
<li>ui-resizable-s</li>
<li>ui-resizable-e</li>
<li>ui-resizable-w</li>
<li>ui-resizable-se</li>
<li>ui-resizable-sw</li>
<li>ui-resizable-nw</li>
<li>ui-resizable-ne</li>
</ul></li>
</ul>

<h3>UI Icons (jQuery)</h3>

<ul>
<li><strong>ui-cons</strong> - Main icon class

<ul>
<li>ui-icon-carat-1-n</li>
<li>ui-icon-carat-1-ne</li>
<li>ui-icon-carat-1-e</li>
<li>ui-icon-carat-1-se</li>
<li>ui-icon-carat-1-s</li>
<li>ui-icon-carat-1-sw</li>
<li>ui-icon-carat-1-w</li>
<li>ui-icon-carat-1-nw</li>
<li>ui-icon-carat-2-n-s</li>
<li>ui-icon-carat-2-e-w</li>
<li>ui-icon-triangle-1-n</li>
<li>ui-icon-triangle-1-ne</li>
<li>ui-icon-triangle-1-e</li>
<li>ui-icon-triangle-1-se</li>
<li>ui-icon-triangle-1-s</li>
<li>ui-icon-triangle-1-sw</li>
<li>ui-icon-triangle-1-w</li>
<li>ui-icon-triangle-1-nw</li>
<li>ui-icon-triangle-2-n-s</li>
<li>ui-icon-triangle-2-e-w</li>
<li>ui-icon-arrow-1-n</li>
<li>ui-icon-arrow-1-ne</li>
<li>ui-icon-arrow-1-e</li>
<li>ui-icon-arrow-1-se</li>
<li>ui-icon-arrow-1-s</li>
<li>ui-icon-arrow-1-sw</li>
<li>ui-icon-arrow-1-w</li>
<li>ui-icon-arrow-1-nw</li>
<li>ui-icon-arrow-2-n-s</li>
<li>ui-icon-arrow-2-ne-sw</li>
<li>ui-icon-arrow-2-e-w</li>
<li>ui-icon-arrow-2-se-nw</li>
<li>ui-icon-arrowstop-1-n</li>
<li>ui-icon-arrowstop-1-e</li>
<li>ui-icon-arrowstop-1-s</li>
<li>ui-icon-arrowstop-1-w</li>
<li>ui-icon-arrowthick-1-n</li>
<li>ui-icon-arrowthick-1-ne</li>
<li>ui-icon-arrowthick-1-e</li>
<li>ui-icon-arrowthick-1-se</li>
<li>ui-icon-arrowthick-1-s</li>
<li>ui-icon-arrowthick-1-sw</li>
<li>ui-icon-arrowthick-1-w</li>
<li>ui-icon-arrowthick-1-nw</li>
<li>ui-icon-arrowthick-2-n-s</li>
<li>ui-icon-arrowthick-2-ne-sw</li>
<li>ui-icon-arrowthick-2-e-w</li>
<li>ui-icon-arrowthick-2-se-nw</li>
<li>ui-icon-arrowthickstop-1-n</li>
<li>ui-icon-arrowthickstop-1-e</li>
<li>ui-icon-arrowthickstop-1-s</li>
<li>ui-icon-arrowthickstop-1-w</li>
<li>ui-icon-arrowreturnthick-1-w</li>
<li>ui-icon-arrowreturnthick-1-n</li>
<li>ui-icon-arrowreturnthick-1-e</li>
<li>ui-icon-arrowreturnthick-1-s</li>
<li>ui-icon-arrowreturn-1-w</li>
<li>ui-icon-arrowreturn-1-n</li>
<li>ui-icon-arrowreturn-1-e</li>
<li>ui-icon-arrowreturn-1-s</li>
<li>ui-icon-arrowrefresh-1-w</li>
<li>ui-icon-arrowrefresh-1-n</li>
<li>ui-icon-arrowrefresh-1-e</li>
<li>ui-icon-arrowrefresh-1-s</li>
<li>ui-icon-arrow-4</li>
<li>ui-icon-arrow-4-diag</li>
<li>ui-icon-extlink</li>
<li>ui-icon-newwin</li>
<li>ui-icon-refresh</li>
<li>ui-icon-shuffle</li>
<li>ui-icon-transfer-e-w</li>
<li>ui-icon-transferthick-e-w</li>
<li>ui-icon-folder-collapsed</li>
<li>ui-icon-folder-open</li>
<li>ui-icon-document</li>
<li>ui-icon-document-b</li>
<li>ui-icon-note</li>
<li>ui-icon-mail-closed</li>
<li>ui-icon-mail-open</li>
<li>ui-icon-suitcase</li>
<li>ui-icon-comment</li>
<li>ui-icon-person</li>
<li>ui-icon-print</li>
<li>ui-icon-trash</li>
<li>ui-icon-locked</li>
<li>ui-icon-unlocked</li>
<li>ui-icon-bookmark</li>
<li>ui-icon-tag</li>
<li>ui-icon-home</li>
<li>ui-icon-flag</li>
<li>ui-icon-calendar</li>
<li>ui-icon-cart</li>
<li>ui-icon-pencil</li>
<li>ui-icon-clock</li>
<li>ui-icon-disk</li>
<li>ui-icon-calculator</li>
<li>ui-icon-zoomin</li>
<li>ui-icon-zoomout</li>
<li>ui-icon-search</li>
<li>ui-icon-wrench</li>
<li>ui-icon-gear</li>
<li>ui-icon-heart</li>
<li>ui-icon-star</li>
<li>ui-icon-link</li>
<li>ui-icon-cancel</li>
<li>ui-icon-plus</li>
<li>ui-icon-plusthick</li>
<li>ui-icon-minus</li>
<li>ui-icon-minusthick</li>
<li>ui-icon-close</li>
<li>ui-icon-closethick</li>
<li>ui-icon-key</li>
<li>ui-icon-lightbulb</li>
<li>ui-icon-scissors</li>
<li>ui-icon-clipboard</li>
<li>ui-icon-copy</li>
<li>ui-icon-contact</li>
<li>ui-icon-image</li>
<li>ui-icon-video</li>
<li>ui-icon-script</li>
<li>ui-icon-alert</li>
<li>ui-icon-info</li>
<li>ui-icon-notice</li>
<li>ui-icon-help</li>
<li>ui-icon-check</li>
<li>ui-icon-bullet</li>
<li>ui-icon-radio-off</li>
<li>ui-icon-radio-on</li>
<li>ui-icon-pin-w</li>
<li>ui-icon-pin-s</li>
<li>ui-icon-play</li>
<li>ui-icon-pause</li>
<li>ui-icon-seek-next</li>
<li>ui-icon-seek-prev</li>
<li>ui-icon-seek-end</li>
<li>ui-icon-seek-start</li>
<li>ui-icon-seek-first</li>
<li>ui-icon-stop</li>
<li>ui-icon-eject</li>
<li>ui-icon-volume-off</li>
<li>ui-icon-volume-on</li>
<li>ui-icon-power</li>
<li>ui-icon-signal-diag</li>
<li>ui-icon-signal</li>
<li>ui-icon-battery-0</li>
<li>ui-icon-battery-1</li>
<li>ui-icon-battery-2</li>
<li>ui-icon-battery-3</li>
<li>ui-icon-circle-plus</li>
<li>ui-icon-circle-minus</li>
<li>ui-icon-circle-close</li>
<li>ui-icon-circle-triangle-e</li>
<li>ui-icon-circle-triangle-s</li>
<li>ui-icon-circle-triangle-w</li>
<li>ui-icon-circle-triangle-n</li>
<li>ui-icon-circle-arrow-e</li>
<li>ui-icon-circle-arrow-s</li>
<li>ui-icon-circle-arrow-w</li>
<li>ui-icon-circle-arrow-n</li>
<li>ui-icon-circle-zoomin</li>
<li>ui-icon-circle-zoomout</li>
<li>ui-icon-circle-check</li>
<li>ui-icon-circlesmall-plus</li>
<li>ui-icon-circlesmall-minus</li>
<li>ui-icon-circlesmall-close</li>
<li>ui-icon-squaresmall-plus</li>
<li>ui-icon-squaresmall-minus</li>
<li>ui-icon-squaresmall-close</li>
<li>ui-icon-grip-dotted-vertical</li>
<li>ui-icon-grip-dotted-horizontal</li>
<li>ui-icon-grip-solid-vertical</li>
<li>ui-icon-grip-solid-horizontal</li>
<li>ui-icon-gripsmall-diagonal-se</li>
<li>ui-icon-grip-diagonal-se</li>
</ul></li>
</ul>
</div>
            
            <div id="footer" class="container c48 rax-active-pal round rax-glossy">
                <ul class="clearfix">
                    <li><a href="index.html">Overview</a></li>
                    <li><a href="features.html">Features</a></li>
                    <li><a href="new-features.html">What's new</a></li>
                    <li><a href="table-of-contents.html" title="Table of Content">Contents</a></li>
                    <li><a href="../examples">Examples</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>

